<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8"/>
		<title>小雨cat</title>
		<meta name="author" content="" />
		<meta name="copyright" content=" " />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<style type="text/css">
			.wrapper {
				margin: 50px 0 0 25px;
			}
			.doraemon {
				position: relative;
			}
			/* 头部 */
			.doraemon .head {
				position: relative;
				width: 320px;
				height: 300px;
				border-radius: 150px;
				background: #07bbee;
				background: -webkit-radial-gradient(
					right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000
				);
				background: -moz-radial-gradient(
					right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000
				);
				background: -ms-radial-gradient(
					right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000
				);
				background: -o-radial-gradient(
					right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000
				);
				border: 2px solid #555;
				box-shadow: -5px 10px 15px rgba(0,0,0,0.45);
			}
			/* 脸部 */
			.doraemon .face {
				position: relative;			/* 让所有脸部元素可以自由定位 */
				z-index: 2;			/* 脸在头部背景上面 */
			}
			/* 白色脸底 */
			.doraemon .face .white {
				width: 265px;
				height: 195px;
				border-radius: 150px;
				position: absolute; /* 进行绝对值定位 */
				top: 75px;
				left: 25px;
				background: #fff;
				/* 此放射渐变也是使脸的左下角暗一些，看上去真实 */
				background: -webkit-radial-gradient(
				right top,#fff 75%,#eee 80%,#999 90%,#444
				);
				background: -moz-radial-gradient(
				right top,#fff 75%,#eee 80%,#999 90%,#444
				);
				background: -ms-radial-gradient(
				right top,#fff 75%,#eee 80%,#999 90%,#444
				);
				background: -o-radial-gradient(
				right top,#fff 75%,#eee 80%,#999 90%,#444
				);
			}
			/* 鼻子 */
			.doraemon .face .nose {
				width: 30px;
				height: 30px;
				border-radius: 15px;
				background: #c93300;
				border: 2px solid #000;
				position: absolute;
				top: 110px;
				left: 140px;
				z-index: 3;
				/* 鼻子在白色脸底的表面 */
			}
			/* 鼻子上的高光 */
			.doraemon .face .nose .light {
				width: 10px;
				height: 10px;
				border-radius: 5px;
				box-shadow: 19px 8px 5px #fff;
				/* 通过阴影实现高光 */
			}
			/* 鼻子下的线 */
			.doraemon .face .nose_line {
				width: 3px;
				height: 100px;
				background: #333;
				position: absolute;
				top: 143px;
				left: 155px;
				z-index: 3;
			}
			/* 嘴巴 */
			.doraemon .face .mouth {
				width: 220px;
				height: 400px;
				/* 通过底边框加上圆角模拟微笑嘴巴 */
				border-bottom: 3px solid #333;
				border-radius: 120px;
				position: absolute;
				top: -160px;
				left: 45px;
			}
			/* 眼睛 */
			.doraemon .eyes {
				position: relative;
				z-index: 3;
				/* 眼睛在白色脸底表面 */
			}
			/* 眼睛共同的样式 */
			.doraemon .eyes .eye {
				width: 72px;
				height: 82px;
				background: #fff;
				border: 2px solid #000;
				border-radius: 35px;
				position: absolute;
				top: 40px;
			}
			/* 眼珠 */
			.doraemon .eyes .eye .black {
				width: 14px;
				height: 14px;
				background: #000;
				border-radius: 7px;
				position: absolute;
				top: 40px;
				-webkit-animation: eyemove 3s linear infinite;
				-moz-animation: eyemove 3s linear infinite;
				-ms-animation: eyemove 3s linear infinite;
				-o-animation: eyemove 3s linear infinite;
				animation: eyemove 3s linear infinite;
			}
			.doraemon .eyes .left {
				left: 82px;
			}
			.doraemon .eyes .right {
				left: 156px;
			}
			.doraemon .eyes .eye .bleft {
				left: 50px;
			}
			.doraemon .eyes .eye .bright {
				left: 7px;
			}
			/* 胡须背景，主要用于挡住嘴巴的一部分，不要显示得太长 */
			.doraemon .whiskers {
				width: 220px;
				height: 80px;
				background: #FFFFFF;
				border-radius: 15px;
				position: absolute;
				top: 120px;
				left: 45px;
				z-index: 2;		/* 在鼻子和眼睛下面 */
			}
			/* 所有胡子的公用样式 */
			.doraemon .whiskers .whisker {
				width: 60px;
				height: 2px;
				background: #333;
				position: absolute;
				z-index: 2;
			}
			/* 右上胡子 */
			.doraemon .whiskers .rTop {
				left: 165px;
				top: 25px;
			}
			/* 右中胡子 */
			.doraemon .whiskers .rMiddle {
				left: 167px;
				top: 45px;
			}
			/* 右下胡子 */
			.doraemon .whiskers .rBottom {
				left: 165px;
				top: 65px;
			}
			/* 左上胡子 */
			.doraemon .whiskers .lTop {
				left: 0;
				top: 25px;
			}
			/* 左中胡子 */
			.doraemon .whiskers .lMiddle {
				left: -2px;
				top: 45px;
			}
			/* 左下胡子 */
			.doraemon .whiskers .lBottom {
				left: 0;
				top: 65px;
			}
			/* 胡子旋转角度 */
			.doraemon .whiskers .r160 {
				-webkit-transform: rotate(160deg);
				-moz-transform: rotate(160deg);
				-ms-transform: rotate(160deg);
				-o-transform: rotate(160deg);
				transform: rotate(160deg);
			}
			.doraemon .whiskers .r20 {
				-webkit-transform: rotate(200deg);
				-moz-transform: rotate(200deg);
				-ms-transform: rotate(200deg);
				-o-transform: rotate(200deg);
				transform: rotate(200deg);
			}
			/* 围脖 */
			.doraemon .choker {
				width: 230px;
				height: 20px;
				background: #c40;
				/* 线性渐变，让围脖看上去更自然 */
				background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
				background: -moz-linear-gradient(center top,#c40,#800400);
				background: -ms-linear-gradient(center top,#c40,#800400);
				border: 2px solid #000;
				border-radius: 10px;
				position: relative;
				top: -40px;
				left: 45px;
				z-index: 4;
			}	
			/* 铃铛 */
			.doraemon .choker .bell {
				width: 40px;
				height: 40px;
				_overflow: hidden; /* IE6  hack */
				border: 2px solid #000;
				border-radius: 50px;
				background: #f9f12a;
				background: -webkit-gradient(linear,left top,left bottom,from(#f9f12a),color-stop(0.5,#e9e11a),to(#a9a100));
				background: -moz-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);
				background: -ms-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);
				box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
				position: absolute;
				top: 5px;
				left: 90px;
			}
			/* 双横线 */
			.doraemon .choker .bell_line {
				width: 36px;
				height: 2px;
				background: #f9f12a;
				border: 2px solid #333;
				border-radius: 3px 3px 0 0;
				position: absolute;
				top: 10px;
			}
			/* 黑点 */
			.doraemon .choker .bell_circle {
				width: 12px;
				height: 10px;
				background: #000000;
				border-radius: 5px;
				position: absolute;
				top: 20px;
				left: 14px;
			}
			/* 黑点下的线 */
			.doraemon .choker .bell_under {
				width: 3px;
				height: 15px;
				background: #000000;
				position: absolute;
				left: 18px;
				top: 27px;
			}
			/* 铃铛高光 */
			.doraemon .choker .bell_light {
				width: 12px;
				height: 12px;
				border-radius: 10px;
				box-shadow: 19px 8px 5px #fff;
				position: absolute;
				top: -5px;
				left: 5px;
				opacity: 0.7;
			}
			/* 身子 */
			.doraemon .bodys {
				position: relative;
				top: -310px;
			}
			/* 肚子 */
			.doraemon .bodys .body {
				width: 220px;
				height: 165px;
				background: #07beea;
				background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0),to(#0096be));
				background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
				background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
				border: 2px solid #333;
				position: absolute;
				top: 265px;
				left: 50px;
			}
			/* 白色肚兜 */
			.doraemon .bodys .wraps {
				width: 170px;
				height: 170px;
				background: #fff;
				background: -webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444),to(#000));
				background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95% #000);
				background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95% #000);
				border: 2px solid #000;
				border-radius: 85px;
				position: absolute;
				left: 72px;
				top: 230px;
			}
			/* 口袋 */
			.doraemon .bodys .pocket {
				width: 130px;
				height: 130px;
				border-radius: 65px;
				background: #FFFFFF;
				background: -webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stopL(0.88,#ddd),to(#fff));
				background: -moz-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);
				background: -ms-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);
				border: 2px solid #000;
				position: absolute;
				top: 250px;
				left: 92px;
			}
			/* 挡住口袋一半 */
			.doraemon .bodys .pocket_mask {
				width: 134px;
				height: 60px;
				background: #fff;
				border-bottom: 2px solid #000;
				position: absolute;
				top: 259px;
				left: 92px;
			}
			
			/* 左右手 */
			.doraemon .hand_right,.doraemon .hand_left {
				height: 100px;
				width: 100px;
				position: absolute;
				top: 272px;
				left: 248px;
				/* background: #000066; */
			}
			/* 左手*/
			.doraemon .hand_left {
				left: -10px;
			}
			/* 手臂公共部分 */
			.doraemon .arm {
			width: 80px;
			height: 50px;
			background: #07BEEA;
			background: -webkit-gradient(linear,left top,left bottom,from(#07beea),color-stop,left bottom,from(#07beea),color-stop(0.85,#07beea),to(#555));
			background: -moz-linear-gradient(center top,#07beea,#07beea 85%,#555);
			background: -moz-linear-gradient(center top,#07beea,#07beea 85%,#555);
			border: 1px solid #000000;
			box-shadow: -10px 7px 10px rgba(0,0,0,0.35);
			z-index: -1;
			position: relative;
			}
			/* 右手手臂 */
			.doraemon .hand_right .arm {
				top: 17px;
				-webkit-transform: rotate(35deg);
				-moz-transform: rotate(35deg);
				-ms-transform: rotate(35deg);
				-o-transform: rotate(35deg);
				transform: rotate(35deg);
			}
			/* 左手手臂 */
			.doraemon .hand_left .arm {
				top: 17px;
				background: #0096be;
				/* 背光一面使用纯色，使其有立体感 */
				box-shadow: 5px -7px 10px rgba(0,0,0,0.25);
				-webkit-transform: rotate(145deg);
				-moz-transform: rotate(145deg);
				-ms-transform: rotate(145deg);
				-o-transform: rotate(145deg);
				transform: rotate(145deg);
			}
			/* 圆形手掌公共部分 */
			.doraemon .circle {
				width: 60px;
				height: 60px;
				border-radius: 30px;
				border: 2px solid #000;
				background: #FFFFFF;
				background: -webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd),to(#999));
				background: -moz-linear-gradient(right top,#fff,#fff 50%,#eee 70%,#ddd 80%,#999);
				background: -moz-linear-gradient(right top,#fff,#fff 50%,#eee 70%,#ddd 80%,#999);
				position: absolute;
			}
			/* 右手手掌 */
			.doraemon .hand_right .circle {
				left: 40px;
				top: 32px;
			}
			/* 右手手掌 */
			.doraemon .hand_left .circle {
				left: -20px;
				top: 32px;
			}
			/* 手臂和身体结合处，使用背景遮住边框 */
			.doraemon .arm_rewrite {
				height: 45px;
				width: 5px;
				background: #07beea;
				position: relative
			}
			/* 右手结合处 */
			.doraemon .hand_right .arm_rewrite {
				top: -45px;
				left: 22px;
			}
			/* 右手结合处 */
			.doraemon .hand_left .arm_rewrite {
				top: -45px;
				left: 60px;
				background: #0096be;
				/* 同理，背光一面使用纯色，使其有立体感 */
			}
			/* 脚步 */
			.doraemon .foot {
				width: 280px;
				height: 40px;
				position: relative;
				top: 55px;
				left: 20px;
			}
			/* 左右脚共同样式 */
			.doraemon .foot .left,.doraemon .foot .right {
				width: 125px;
				height: 30px;
				background: #fff;
				background: -webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));
				background: -moz-linear-gradient(linear,right top,#fff,#fff 75%,#eee 85%,#999);
				background: -ms-linear-gradient(linear,right top,#fff,#fff 75%,#eee 85%,#999);
				border: 2px solid #333;
				border-radius: 80px 60px 60px 40px;
				box-shadow: -6px 0 10px rgba(0,0,0,0.35);
				position: relative;
			}
			.doraemon .foot .left {
				left: 8px;
				top: 65px;
			}
			.doraemon .foot .right {
				left: 141px;
				top: 31px;
			}
			/* 双脚之间的缝隙，加阴影使其有立体感 */
			.doraemon .foot .foot_rewrite {
				width: 20px;
				height: 10px;
				background: #fff;
				background: -webkit-gradient(linear,right top,left bottom,from(#666),color-stop(0.83,#fff),to(#fff));
				background: -moz-linear-gradient(right top,#666,#fff 83%,#fff);
				background: -ms-linear-gradient(right top,#666,#fff 83%,#fff);
				/* 制作半圆效果 */
				border: 2px solid #000;
				border-bottom: none;
				border-radius: 40px 40px 0 0;
				position: relative;
				top: -11px;
				left: 130px;
				_left: 127px;
			}
			
			
			/* 让眼睛动起来 */
			@-webkit-keyframes eyemove {
				70% {
					margin: 0 0 0 0;
				}
				80% {
					margin: -22px 0 0 0;
				}
				85% {
					margin: -22px 0 0 5px;
				}
				90% {
					margin: -22px 10px 0 0;
				}
				93% {
					margin: -22px 0 0 0;
				}
				96% {
					margin: 0 0 0 0;
				}
			}
			@-moz-keyframes eyemove {
				70% {
					margin: 0 0 0 0;
				}
				80% {
					margin: -22px 0 0 0;
				}
				85% {
					margin: -22px 0 0 5px;
				}
				90% {
					margin: -22px 10px 0 0;
				}
				93% {
					margin: -22px 0 0 0;
				}
				96% {
					margin: 0 0 0 0;
				}
			}
			@-o-keyframes eyemove {
				70% {
					margin: 0 0 0 0;
				}
				80% {
					margin: -22px 0 0 0;
				}
				85% {
					margin: -22px 0 0 5px;
				}
				90% {
					margin: -22px 10px 0 0;
				}
				93% {
					margin: -22px 0 0 0;
				}
				96% {
					margin: 0 0 0 0;
				}
			}
			@keyframes eyemove {
				70% {
					margin: 0 0 0 0;
				}
				80% {
					margin: -22px 0 0 0;
				}
				85% {
					margin: -22px 0 0 5px;
				}
				90% {
					margin: -22px 10px 0 0;
				}
				93% {
					margin: -22px 0 0 0;
				}
				96% {
					margin: 0 0 0 0;
				}
			}
		</style>
		
	</head>
	<body>
		<div class="wrapper">
			<!-- 叮当猫整体 -->
			<div class="doraemon">
				<!-- 头部 -->
				<div class="head">
					<!-- 眼睛 -->
					<div class="eyes">
						<div class="eye left">
							<!-- 眼珠 -->
							<div class="black bleft"></div>
						</div>
						<div class="eye right">
							<div class="black bright"></div>
						</div>
					</div>
					<!-- 脸部 -->
					<div class="face">
						<!-- 白色脸底 -->
						<div class="white"></div>
						<!-- 鼻子 -->
						<div class="nose">
							<!-- 鼻子高光部分 -->
							<div class="light"></div>
						</div>
						<!-- 鼻子的竖线 -->
						<div class="nose_line"></div>
						<!-- 嘴巴 -->
						<div class="mouth"></div>
						<!-- 胡须 -->
						<div class="whiskers">
							<div class="whisker rTop r160"></div>
    	                    <div class="whisker rMiddle"></div>
    	                    <div class="whisker rBottom r20"></div>
    	                    <div class="whisker lTop r20"></div>
    	                    <div class="whisker lMiddle"></div>
    	                    <div class="whisker lBottom r160"></div>
						</div>
					</div>
				</div>
				<!-- 脖子和铃铛 -->
				<div class="choker">
					<!-- 铃铛 -->
					<div class="bell">
						<div class="bell_line"></div>
    	                <div class="bell_circle"></div>
    	                <div class="bell_under"></div>
    	                <div class="bell_light"></div>
					</div>
				</div>
				<!-- 身体 -->
				<div class="bodys">
					<!-- 肚子 -->
					<div class="body"></div>
					<!-- 肚兜 -->
					<div class="wraps"></div>
					<!-- 口袋 -->
					<div class="pocket"></div>
					<!-- 遮住一半口袋，使其呈现半圆 -->
					<div class="pocket_mask"></div>
				</div>
				<!-- 右手 -->
				<div class="hand_right">
					<!-- 手臂 -->
					<div class="arm"></div>
					<!-- 手掌 -->
					<div class="circle"></div>
					<!-- 遮住手臂和身子交接处的线 -->
					<div class="arm_rewrite"></div>
				</div>
				<!-- 左手 -->
				<div class="hand_left">
					<div class="arm"></div>
					<div class="circle"></div>
					<div class="arm_rewrite"></div>
				</div>
				<!-- 脚 -->
				<div class="foot">
					<div class="left"></div>
					<div class="right"></div>
					<!-- 双脚之间的缝隙 -->
					<div class="foot_rewrite"></div>
				</div>
			</div>
		</div>
	</body>
</html>
